<template>
  <div class="login relative">
    <div class="login__left">
      <h3 class="company text-white ft-18 items-center">
        <img src="/images/big-logo.png" width="100" alt="" />
      </h3>
      <div class="activities pl-7">
        <h3 class="text-white mb-0 text-3xl font-bold">超值活动</h3>
        <h1 class="text-white mt-5 mb-5 text-4xl font-bold">下单即送精美钻石店铺</h1>
        <p class="text-white ft-14 ml-1 font-bold">活动时间：2023年5月1日-7月31日</p>
      </div>
    </div>
    <div class="login__right">
      <div class="form-wrapper">
        <h1 class="text-7xl mb-2 font-bold big-title">百搜优化</h1>
        <p class="ft-14 mb-6">查词提单更简单，运营提效更快捷</p>

        <a-form ref="FormRef" layout="vertical" :model="formFields" :rules="formRules" hideRequiredMark>
          <a-form-item label="您的账号：" name="username">
            <a-input
              size="large"
              v-model:value="formFields.username"
              placeholder="请输入用户账号"
              @pressEnter="handleLogin"
            >
              <template #prefix>
                <user-outlined type="user" />
              </template>
            </a-input>
          </a-form-item>

          <a-form-item label="您的密码：" name="pwd">
            <a-input-password
              size="large"
              v-model:value="formFields.pwd"
              placeholder="请输入登录密码"
              @pressEnter="handleLogin"
            >
              <template #prefix>
                <lock-outlined />
              </template>
            </a-input-password>
          </a-form-item>
        </a-form>
        <a-button class="login-btn font-bold" :loading="loading || loading1" type="primary" @click="handleLogin">
          登录
        </a-button>
      </div>
      <p class="login__right__foot">易百搜 沪ICP备2022011483号©2022 All Rights Reserved，百姓网战略技术支持</p>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { reactive, ref } from 'vue'
import type { FormInstance } from 'ant-design-vue'
import { LockOutlined, UserOutlined } from '@ant-design/icons-vue'
import login, { type LoginFields } from '@/services/user/login'
import { useMainStore } from '@/store/useMainStore'
import { useRegionStore } from '@/store/useRegionStore'
import { useRouter } from 'vue-router'
import login1 from '@/services/user/login1'
import { UserInfo } from '@/core/interfaces/user'
import { message } from 'ant-design-vue'

const FormRef = ref<FormInstance>()
const mainStore = useMainStore()
const regionStore = useRegionStore()
const router = useRouter()

const formFields = reactive<LoginFields>({
  username: '',
  pwd: ''
})

const formRules = reactive({
  username: [
    {
      required: true,
      message: '账号不能为空',
      trigger: 'blur'
    }
  ],
  pwd: [
    {
      required: true,
      message: '密码不能为空',
      trigger: 'blur'
    }
  ]
})

const [, fetchLogin, loading] = login()
const [, fetchLogin1, loading1] = login1()

function handleLogin() {
  FormRef.value?.validate().then(async () => {
    const [err, res] = await fetchLogin1(formFields)
    if (!err) {
      next(res.data.data)
    } else {
      const [err1, res1] = await fetchLogin(formFields)
      if (!err1) {
        next(res1.data.data)
      } else {
        message.error(err1.message)
      }
    }
  })
}

function next(response: UserInfo) {
  mainStore.setUserInfo(response.content)
  mainStore.setToken(response.token)
  regionStore.initRegion()
  router.push('/price-package-df')
}
</script>

<script lang="ts">
export default { name: 'Login' }
</script>

<style scoped lang="scss">
.login {
  display: flex;
  width: 100%;
  height: 100%;
  background-color: #fff;
  box-shadow: 0 2px 4px 0 rgb(0 0 0 / 25%);

  &__left {
    width: 450px;
    background: url('/images/login-bg.png') no-repeat;
    background-size: cover;
    flex-shrink: 0;
  }

  &__right {
    position: relative;
    width: 100%;
    padding: 170px 150px 0;

    .form-wrapper {
      position: absolute;
      width: 500px;
      top: 40%;
      left: 50%;
      transform: translate(-50%, -50%);

      .big-title {
        margin-left: -8px;
      }
    }

    .login-btn {
      width: 100%;
      height: 40px;
      font-size: 16px;
      border-radius: 4px;
    }

    &__foot {
      position: absolute;
      bottom: 10px;
      right: 100px;
      left: 100px;
      text-align: center;
    }
  }

  .company {
    padding: 40px 0 0 30px;
  }

  .activities {
    color: #fff;
    margin-top: 120px;
  }
}
</style>
